<template>
	<view class="container">


		<view class="userInfo">
			<view class="userImg-IP">
				<image class="avatar" :src="userInfo.headImg || defaultImg" @click="changeImage"></image>
				<view class="userIp">
					<view v-if="!token" @click="toLoginPage">立即登录</view>
					<view v-else>{{ userInfo.nickname }}</view>
					<view>关注(6) | 好友(0)</view>
				</view>
			</view>
			<view class="kefu" @click="goToKeFu">
				<text class="iconfont icon-kefu"></text>
				<text>官方客服</text>
			</view>
			<view class="set">
				<text class="iconfont icon-shezhi"></text>
				<text>设置</text>
			</view>
		</view>

		<view class="iconfont-chinese">
			<view class="set" @click="goCollection">
				<text class="iconfont icon-shoucang1"></text>
				<text>收藏</text>
			</view>

			<view class="set" @click="goFollow">
				<text class="iconfont icon-dianpu"></text>
				<text>关注店铺</text>
			</view>

			<view class="set" @click="goBrowsingRecords">
				<text class="iconfont icon-zuji"></text>
				<text>足迹</text>
			</view>

			<view class="set">
				<text class="iconfont icon-lingqianbao"></text>
				<text>零钱 ￥0.00</text>
			</view>
		</view>


		<view class="myOrder">
			<view class="myOrder-top">
				<text>我的订单</text>
				<text @click="goMyOrders(0)">全部<text class="iconfont icon-jiantouyou"></text></text>
			</view>
			<view class="myOrder-bottom">
				<view class="set" @click="goMyOrders(1)">
					<text class="iconfont icon-daifukuan"></text>
					<text>待付款</text>
				</view>
				<view class="set" @click="goMyOrders(2)">
					<text class="iconfont icon-daipingjia"></text>
					<text>待评价</text>
				</view>
				<view class="set" @click="goAfterSales">
					<text class="iconfont icon-tuikuantuihuo"></text>
					<text>退款/售后</text>
				</view>
			</view>
		</view>


		<view class="my-recently">
			<text>我的动态</text>
			<text class="iconfont icon-a-gengduohengxiang"></text>
		</view>



		<scroll-view class="container-scroll" scroll-x :style="{width: wd + 'px'}">
			<view class="box">
				<image class="box-avatar" src="../../static/logo.png"></image>
				<view class="box-left">
					<view>朋友圈</view>
					<view>6312万人热议</view>
				</view>
			</view>

			<view class="box">
				<image class="box-avatar" src="../../static/logo.png"></image>
				<view class="box-left">
					<view>我的动态</view>
					<view>297万人热议</view>
				</view>
			</view>

			<view class="box">
				<image class="box-avatar" src="../../static/logo.png"></image>
				<view class="box-left">
					<view>我的动态</view>
					<view>6312万人热议</view>
				</view>
			</view>

			<view class="box">
				<image class="box-avatar" src="../../static/logo.png"></image>
				<view class="box-left">
					<view>我的动态</view>
					<view>6312万人热议</view>
				</view>
			</view>

			<view class="box">
				<image class="box-avatar" src="../../static/logo.png"></image>
				<view class="box-left">
					<view>我的动态</view>
					<view>6312万人热议</view>
				</view>
			</view>
		</scroll-view>
		<view class="">
			<tabber_my :current="4"></tabber_my>
		</view>
	</view>
</template>

<script>
	import {
		reqLogin
	} from '@/api/user/index.js'
	import {
		upload
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				wd: 0,
				token: this.$store.state.user.token,
				userInfo: this.$store.state.user.userInfo,
				defaultImg: 'http://cool.ldqc.xyz:7777/file/src/d554e3f8-dd3c-470b-886b-6d8e0611b93c.png',
				time: 3,
				timer: null,
				userId: '111'
			};
		},
		// onLoad(){
		// 	const sysInfo = uni.getSystemInfoSync();
		// 	this.wd = sysInfo.windowWidth
		// 	if(!this.token){
		// 		this.timer = setInterval(()=>{
		// 			 uni.$showMsg(`您还未登录${this.time}后将跳转到登录页`)
		// 			 this.time--
		// 			 if(this.time<0){
		// 				 clearInterval(this.timer)
		// 				 wx.redirectTo({
		// 				 					 url:'../../Packages/PackageLogin/Login'
		// 				 })
		// 			 }
		// 		},1000)
		// 	}
		// },
		methods: {
			changeImage() {
				wx.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success(res) {
						// tempFilePath可以作为img标签的src属性显示图片
						const tempFilePaths = res.tempFilePaths
						console.log(tempFilePaths);
						upload(tempFilePaths[0]).then(r => {
							console.log(r);
						})
					}
				})
			},
			toLoginPage() {
				wx.navigateTo({
					url: '../../Packages/PackageLogin/Login'
				})
			},
			goToKeFu() {
				wx.navigateTo({
					url: '../../../../../PackageB/KeFu/KeFu'
				})
			},
			// 跳转收藏
			goCollection() {
				uni.navigateTo({
					url: `/subPackages_user/Collection/Collection?id=${this.userId}`
				})
			},
			// 跳转足迹
			goBrowsingRecords() {
				uni.navigateTo({
					url: `/subPackages_user/BrowsingRecords/BrowsingRecords?id=${this.userId}`
				})
			},
			// 跳转关注
			goFollow() {
				uni.navigateTo({
					url: `/subPackages_user/Follow/Follow?id=${this.userId}`
				})
			},
			// 跳转我的订单页面
			goMyOrders(index) {
				uni.navigateTo({
					url: `/subPackages_user/MyOrders/MyOrders?index=${index}`
				})
			},
			// 跳转售后
			goAfterSales() {
				uni.navigateTo({
					url: `/subPackages_user/AfterSales/AfterSales?id=${this.userId}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #F2F2F2;

		.userInfo {
			padding: 20rpx 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: #FFE6C7;

			.userImg-IP {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.avatar {
					height: 120rpx;
					width: 120rpx;
					border-radius: 50%;
				}

				.userIp {
					line-height: 60rpx;
					margin-left: 20rpx;
				}
			}

			.kefu {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				line-height: 60rpx;
			}
		}

		//字体图片+文字公共样式
		.set {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			line-height: 60rpx;
		}

		.iconfont-chinese {
			display: flex;
			justify-content: space-around;
			padding: 20rpx 40rpx;
			background-color: #FCF8F5;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
		}

		.myOrder {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-top: 20rpx;
			background-color: #FFFFFF;

			.myOrder-top {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 40rpx;
			}

			.myOrder-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx 60rpx;
			}
		}

		.my-recently {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 40rpx;
			margin-top: 40rpx;
		}

		.container-scroll {
			white-space: nowrap;
			height: 300rpx;

			.box {
				width: 35%;
				height: 80rpx;
				border: 1px solid #fff;
				border-radius: 10rpx;
				background-color: #fff;
				margin-left: 10rpx;
				margin-top: 40rpx;
				padding: 20rpx 10rpx;
				display: inline-block;

				.box-avatar {
					height: 60rpx;
					width: 60rpx;
					border-radius: 10rpx;
				}

				.box-left {
					float: right;
					text-align: center;
					font-size: $uni-font-size-sm;
					color: $uni-text-color-grey;
				}
			}
		}
	}
</style>